import React, {Component} from 'react';

class Search extends Component {
  constructor(props) {
    super(props);
    // 在最开始的时候 给方法绑定this
    // 方式1.把方法变成箭头函数
    // 方式2.事件中 调用方法的时候.bind(this)  可以传值
    // 方式3.在构造函数中直接绑定this
    this.filterDog = this.filterDog.bind(this);
  }


  state = {
    inputValue: '',
    listDog: ['哈士奇',
      '哈士奇长毛', '哈士奇短毛',
      '雪纳瑞', '雪纳瑞白色', '雪纳瑞黑色', '金毛', '金毛狮王', '拉布拉多',
      '拉布拉多卡其色',
      '狗柴', '狗牧羊犬', '狗中华田园犬']
  };

  // 初始的时候绑定一下this
  filterDog(key) {
    //遍历this.state.listDog
    return !key ? [] : this.state.listDog.filter(item => item.includes(key));
  }

  render() {
    let {inputValue} = this.state;
    return (
      <div>
        {/*<button onClick={this.filterDog}>看看this</button>*/}
        <input type="text" onChange={(ev) => {
          this.setState({inputValue: ev.target.value})
        }}/>
        <ul>
          {this.filterDog(inputValue).map(item => (<li key={item}>
            <h3>{item}</h3>
          </li>))}
        </ul>
      </div>
    );
  }
}

export default Search;
